<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>讯铭科技</title>
    <link rel="stylesheet" type="text/css" href="./css/all.css">
    <link rel="stylesheet" type="text/css" href="./css/swiper-bundle.min.css">

    <link rel="stylesheet" type="text/css" href="./css/index.css">
    <!-- <link rel="stylesheet/less" type="text/css" href="./css/index.less" /> -->
    <script src="./js/swiper-3.4.2.min.js"></script>
    <!-- <script src="./js/less.js"></script> -->


</head>

<body>
    <div id="app">
        <div class="header">
            <div class="middle">
                <div class="left fl">
                    <div class="logo">
                        <img src="./img/index/logo.png" alt="Logo" onclick="goto('./index.html')">
                    </div>
                </div>
                <div class="right fl">
                    <div class="item">网站首页</div>
                    <div class="item">
                        关于我们
                        <div class="menu" onclick="goto('./about.html')">
                            <p>公司简介</p>
                            <p>品牌理念</p>
                        </div>
                    </div>

                    <div class="item">
                        解决方案
                        <div class="menu" onclick="goto('./solution.html')">
                            <p>解决方案1</p>
                            <p>解决方案2</p>
                        </div>
                    </div>
                    <div class="item">
                        行业服务
                        <div class="menu" onclick="goto('./service.html')">
                            <p>外包测试</p>
                            <p>开发外包</p>
                            <p>IT咨询</p>
                            <p>小程序/APP</p>
                        </div>
                    </div>
                    <div class="item" onclick="goto('./news.html')">新闻中心</div>
                    <div class="item" onclick="goto('./case.html')">案例中心</div>

                    <div class="item" onclick="goto('./contact.html')">联系我们</div>

                </div>
            </div>
        </div>
        <div class="banner">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">1</div>
                    <div class="swiper-slide">2</div>
                    <div class="swiper-slide">3</div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="center">
            <div class="middle youshi fl">
                <div class="title fc flc">
                    <div class="p1">
                        OUR ADVANTAGES
                    </div>
                    <div class="p2">
                        我们的核心优势
                    </div>
                </div>
                <div class="main fl">
                    <div class="item flc">
                        <div class="img">
                            <img src="./img/index/y1.png" alt="">
                        </div>
                        <p class="p fc">专业的策划</p>
                        <p class="text fc">专业的网站策划不仅是制作网站成功的 重要条件之一，也是网站形成的先行条件
                        </p>
                    </div>
                    <div class="item flc">
                        <div class="img">
                            <img src="./img/index/y2.png" alt="">
                        </div>
                        <p class="p fc">专业的服务</p>
                        <p class="text fc"> 专业的服务 <br> 关注客户、不断创新，100%处理
                        </p>
                    </div>
                    <div class="item flc">
                        <div class="img">
                            <img src="./img/index/y3.png" alt="">
                        </div>
                        <p class="p fc">专业的团队</p>
                        <p class="text fc">设计、开发等专业的IT人士
                        </p>
                    </div>
                    <div class="item flc">
                        <div class="img">
                            <img src="./img/index/y4.png" alt="">
                        </div>
                        <p class="p fc">专业的产品</p>
                        <p class="text fc">为企业提升管理效率，针对不同行业为客户推出行业信息化应用解决方案，提供强 大产品驱动力
                        </p>
                    </div>
                    <div class="item flc">
                        <div class="img">
                            <img src="./img/index/y5.png" alt="">
                        </div>
                        <p class="p fc">诚信经营</p>
                        <p class="text fc">专业的服务 <br> 关注客户、不断创新，100%处理
                        </p>
                    </div>
                    <div class="item flc">
                        <div class="img">
                            <img src="./img/index/y6.png" alt="">
                        </div>
                        <p class="p fc">丰富的经验</p>
                        <p class="text fc">竭力提供热情贴心的售后服务
                        </p>
                    </div>
                </div>
            </div>
            <div class="middle fuwu fl">
                <div class="title fc flc">
                    <div class="p1">
                        INDUSTRY SERVICES
                    </div>
                    <div class="p2">
                        行业服务
                    </div>
                </div>
                <div class="main fl bgc">
                    <div class="left">
                        <div class="nav flc act">
                            <p>外包测试</p>
                            <p>outsourcing test</p>
                        </div>
                        <div class="nav flc">
                            <p>开发外包</p>
                            <p>DEVEL OUTSOURCING</p>
                        </div>
                        <div class="nav flc">
                            <p>IT咨询</p>
                            <p>IT CONSULT</p>
                        </div>
                        <div class="nav flc">
                            <p>小程序/APP</p>
                            <p>MINI PROGRAM</p>
                        </div>
                    </div>
                    <div class="right">
                        <p class="smtitle">
                            外包测试
                        </p>
                        <p class="content">
                            企业在互联网上进行网络营销和形象宣传的平台，相当于企业的网络名片， 对企业的形象是一个良好的宣传，通过网络直接帮助企业实现产品的销售， 是企业开展网络营销的重要条件。
                        </p>
                        <p class="action">
                            <img src="./img/index/chakan.png" alt="">
                        </p>
                    </div>
                </div>
            </div>
            <div class="middle anli fl">
                <div class="title fc flc">
                    <div class="p1">
                        CASE CENTER
                    </div>
                    <div class="p2">
                        案例中心
                    </div>
                </div>
                <div class="main fl">
                    <div class="case">
                        <div class="img">
                            <img src="./img/index/case1.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div>
                    <div class="case">
                        <div class="img">
                            <img src="./img/index/case2.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div>
                    <div class="case">
                        <div class="img">
                            <img src="./img/index/case3.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div>
                    <div class="case">
                        <div class="img">
                            <img src="./img/index/case4.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div>
                    <div class="case">
                        <div class="img">
                            <img src="./img/index/case5.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div>
                    <div class="case">
                        <div class="img">
                            <img src="./img/index/case1.png" alt="">
                        </div>
                        <p class="p fc">案例名称</p>
                        <p class="text fc">案例简介</p>
                    </div>
                </div>
            </div>
            <div class="middle contact fl">
                <div class="title fc flc">
                    <div class="p1">
                        CONTACT US
                    </div>
                    <div class="p2">
                        联系我们
                    </div>
                </div>
                <div class="main fl">
                    <div class="top">
                        <div class="item">
                            <div class="img">
                                <img src="./img/index/u1.png" alt="">
                            </div>
                            <div>
                                <p>联系电话</p>
                                <p>0000-00000</p>
                            </div>
                        </div>
                        <div class="item border2">
                            <div class="img">
                                <img src="./img/index/u2.png" alt="">
                            </div>
                            <div>
                                <p>联系邮箱</p>
                                <p>0000-00000</p>
                            </div>
                        </div>
                        <div class="item">
                            <div class="img">
                                <img src="./img/index/u3.png" alt="">
                            </div>
                            <div>
                                <p>联系地址</p>
                                <p style="font-size: 20px;">沧州市运河区华商大厦1008</p>
                            </div>
                        </div>
                    </div>
                    <div class="form">
                        <div class="row row1">
                            <input type="text" id="username" placeholder="您的姓名">
                            <input type="text" id="phone" placeholder="您的电话">
                            <input type="text" id="email" placeholder="联系邮箱">
                        </div>
                        <div class="row row2">
                            <input type="text" id="content" placeholder="留言内容">
                        </div>
                        <div class="row row3">
                            <button onclick="postMsg()">提交留言</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer bgc">
            <div class="middle fl">
                <div class="left">
                    <div onclick="goto('./index.html')">网站首页</div>
                    <div onclick="goto('./about.html')">关于我们</div>
                    <div onclick="goto('./solution.html')">解决方案</div>
                    <div onclick="goto('./service.html')">行业服务</div>
                    <div onclick="goto('./news.html')">新闻中心</div>
                    <div onclick="goto('./case.html')">案例中心</div>
                    <div onclick="goto('./contact.html')">联系我们</div>
                </div>
                <div class="right">
                    <div class="img">
                        <img src="./img/index/qrcode.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/jquery.js"></script>
    <script>
        $(document).ready(() => {
            // 轮播图
            var swiper = new Swiper('.swiper-container', {
                autoplay: 3000,
                autoplayDisableOnInteraction: false,
                pagination: '.swiper-pagination',
                paginationClickable: true,
                // observer: true,
                // observeParents: true,
                loop: true
            });

            const arr = [{
                title: "外包测试",
                content: "企业在互联网上进行网络营销和形象宣传的平台，相当于企业的网络名片， 对企业的形象是一个良好的宣传，通过网络直接帮助企业实现产品的销售， 是企业开展网络营销的重要条件。"
            }, {
                title: "开发外包",
                content: "对企业的形象是一个良好的宣传，通过网络直接帮助企业实现产品的销售， 是企业开展网络营销的重要条件。"
            }, {
                title: "IT咨询",
                content: "企业在互联网上进行网络营销和形象宣传的平台, 对企业的形象是一个良好的宣传，通过网络直接帮助企业实现产品的销售， 是企业开展网络营销的重要条件。"
            }, {
                title: "小程序/APP",
                content: "企业在互联网上进行网络营销和形象宣传的平台，相当于企业的网络名片， 。"
            }, ]


            // 行业服务 过渡
            let timeout = true;
            $('.center .fuwu .main .left .nav').click(function() {
                if (!timeout) return;
                timeout = false;
                $(this).addClass("act").siblings().removeClass("act");
                let index = $(this).index();

                $('.center .fuwu .main .right .smtitle').fadeOut(300, function() {
                    $(this).text(arr[index].title)
                })
                $('.center .fuwu .main .right .content').fadeOut(300, function() {
                    $(this).text(arr[index].content)
                });
                $('.center .fuwu .main .right .action').fadeOut(300);

                $('.center .fuwu .main .right .smtitle').fadeIn(300);
                $('.center .fuwu .main .right .content').fadeIn(300);
                $('.center .fuwu .main .right .action').fadeIn(300, function() {
                    timeout = true;
                });

                console.log($(this).index());

            })

            // 导航栏 过渡
            $(".header .middle .right .item").click(function() {
                $(this).siblings().children(".menu").slideUp(500);
                $(this).children(".menu").stop().slideToggle(500);
            })


        })

        function goto(url) {
            location.href = url;
        }
        // 提交留言
        function postMsg() {
            let sendData = {
                username: $('#username').val(),
                phone: $('#phone').val(),
                email: $('#email').val(),
                content: $('#content').val()
            }
            console.log(sendData);

            $.ajax({
                url: "",
                type: "post",
                data: sendData,
                success(res) {
                    alert("提交成功")
                    console.log(res);

                    $('#username').val("");
                    $('#phone').val("");
                    $('#email').val("");
                    $('#content').val("");
                }
            })


        }
    </script>
</body>

</html>